<script setup lang="ts">
import {ShallowRef} from "vue";
import {Group, Object3D} from "three";

// 当前编辑对象
const editObject = inject<ShallowRef<Object3D | null>>('editObject')!
// 当前编辑模式
const editMode = inject<Ref<'translate' | 'rotate' | 'scale'>>('editMode')!

const contentGroup = inject<Group>('contentGroup')!

//TODO 没成功
/** 记录历史 */
let history = [] as Object3D[][]
let index = -1
const historyLimit = 16
// watch(contentGroup.children, (value) => {
//
//   // 当前操作是撤销或恢复
//   if(index > - 1 && value === history[index]) return
//
//   // 记录新操作
//   // 在撤销多次后进行新操作，将后续旧操作删除
//   if(index !== history.length - 1) {
//     history.splice(index + 1, history.length)
//   }
//   history.push(value)
//
//   if(history.length > historyLimit) {
//     history.shift()
//   }
//
//   console.log(history)
// })

const handleKeyDown = (key: KeyboardEvent) => {
  const ctrl = key.ctrlKey

  if (!ctrl) return

  const z = key.code === 'KeyZ'
  const y = key.code === 'KeyY'
  if (z) {
    handleCtrlZ()
  }else if(y) {
    handleCtrlY()
  }
}

const handleCtrlZ = () => {
  // 无法继续撤销
  if(index === 0) return
  contentGroup.children = history[--index]
}

const handleCtrlY = () => {
  // 无法继续恢复
  if(index === history.length - 1) return
  contentGroup.children = history[++index]
}

onMounted(() => {
  // document.addEventListener('keydown', handleKeyDown)
})

</script>

<template>
  <el-form>
    <el-form-item label="变换">
      <el-radio-group v-model="editMode">
        <el-radio-button label="平移" value="translate" />
        <el-radio-button label="旋转" value="rotate" />
        <el-radio-button label="缩放" value="scale" />
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
